import React, { useEffect, useState } from 'react'
import { Row, Col, Form, Input, Button, Typography, Tag, Select, Card } from "antd"
import { LeftOutlined } from '@ant-design/icons';
import { ajax } from '../../api';
import { baseURL } from '../../api/request';
import moment from "moment"

const { Title } = Typography
const { Meta } = Card;
export default function Annodetail({ history, location }: any) {
    const [data, setData] = useState<any>(null)

    useEffect(() => {
        getOneData()
    }, [])

    const getOneData = async () => {
        let { code, result }: any = await ajax.getannoitem({
            _id: new URLSearchParams(location.search).get("aid")
        })
        if (code == 200) {
            setData(result)
        }
    }


    return (
        <div style={{ height: "100%" }}>
            <Title level={4} style={{ cursor: "pointer" }} >
                <LeftOutlined onClick={() => history.go(-1)} /> 公告详情
                {
                    data && <Row style={{ margin: "30px" }}>
                        <Col>
                            <Card
                                hoverable
                                style={{ width: 800 }}
                                cover={<img alt="example" height={250} src={data.desc.replace(/public/, baseURL)} />}
                            >
                                <Meta title={data.title} description={data.content} style={{ margin: "0 0 10px 0" }}>
                                </Meta>
                                <Meta description={moment(data.time).format("YYYY-MM-DD HH:mm:SS")} style={{ display: "flex", justifyContent: "flex-end" }}>

                                </Meta>
                            </Card>
                        </Col>
                    </Row>
                }
            </Title>
        </div >
    )
}
